<template>
  <section class="blog-details">
    <div class="container">
      <div class="row">
        <div class="col-lg-8">
          <div class="question">
            <div class="question-top">
              <div class="blog-details__content-title">
                {{ questionInfo.title }}
              </div>
              <ul class="list-unstyled blog-one__meta" style="margin-top:30px">
                <li><el-tag type="" effect="dark">问题描述</el-tag></li>
                <li>{{ questionInfo.createBy }}</li>
                <li>{{ questionInfo.createTime }}</li>
              </ul>
            </div>
            <div class="blog-one__single">
              <div class="blog-one__content">
                <!-- <h3 class="blog-one__title">
                  {{questionInfo.title}}
                </h3> -->
                <div v-html="questionInfo.content"></div>
                <div class="jumpToComment">
                  <a href="#replyInput">写评论</a>
                </div>
              </div>
            </div>
            <!-- <div class="share-block">
              <div class="left-block">
                <div class="qu-tag" v-for="item in questionTags">{{item}}</div>
              </div>
            </div> -->
          </div>
          <div class="comment">
            <h3 class="blog-details__content-title">
              {{ commentNodes.length }}个回答
            </h3>
            <div class="comment-one">
              <div class="comment-one__single">
                <div class="comment-one__content">
                  <div class="comment-one__content-top">
                    <div class="comment-one__top-left">
                      <div
                        class="commentList"
                        v-for="item in commentNodes"
                        :key="item.id"
                      >
                        <div class="info">
                          <div class="commentBy">
                            <div class="name">{{ item.createBy }}</div>
                          </div>
                        </div>
                        <!-- <div class="content">{{ item.contentText }}</div> -->
                        <div class="commentContent" v-html="item.content"></div>
                        <div class="control">
                          <div class="date">{{ item.createTime }}</div>
                          <span
                            class="comment-reply"
                            @click="showCommentInput(item, item, 'reply')"
                          >
                            <i class="iconfont el-icon-chat-line-square" />
                            <span>回复</span>
                          </span>
                        </div>
                        <div class="reply">
                          <div
                            class="item"
                            v-for="reply in item.commentNodes"
                            :key="reply.id"
                          >
                            <div class="reply-content">
                              <div class="reply-info">
                                <span class="from-name"
                                  >{{ reply.createBy }}
                                </span>
                                <span>回复了</span>
                                <span class="to-name">{{
                                  reply.parentUsername
                                }}</span>
                                <span>：</span>
                              </div>
                              <!-- <span >{{ reply.contentText }}</span> -->
                              <div v-html="reply.content"></div>
                            </div>
                            <div class="reply-bottom">
                              <span>{{ reply.createTime }}</span>
                              <span
                                class="reply-text"
                                @click="showCommentInput(item, reply, 'reply')"
                              >
                                <span>回复</span>
                              </span>
                            </div>
                          </div>
                          <transition name="fade">
                            <div
                              class="input-wrapper"
                              v-if="showItemId === item.id"
                            >
                              <el-tag
                                type=""
                                effect="dark"
                                v-if="inputLabel != undefined && inputLabel"
                                style="margin-bottom:2px"
                                >{{ inputLabel }}</el-tag
                              >
                              <el-input
                                id="reply-input"
                                class="gray-bg-input"
                                v-model="inputComment"
                                type="textarea"
                                :rows="3"
                                autofocus
                                placeholder="写下你的评论"
                              >
                              </el-input>
                              <div class="btn-control">
                                <el-button @click="cancel" size="small" round
                                  >取消</el-button
                                >
                                <el-button
                                  type="primary"
                                  round
                                  @click="submitCommentReply"
                                  size="small"
                                  >确定</el-button
                                >
                              </div>
                            </div>
                          </transition>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div id="replyInput" class="reply">
            <h2 class="blog-details__content-title">留下你的评论</h2>
            <el-form
              ref="commentForm"
              :model="questionCommentForm"
              :rules="commentFormRules"
              class="reply-form"
            >
              <div class="row">
                <div class="col-lg-12">
                  <div style="height:280px;padding-bottom:20px">
                    <el-form-item prop="content">
                      <Editor v-model="questionCommentForm.content" />
                    </el-form-item>
                  </div>
                </div>
              </div>
            </el-form>
            <div>
              <button
                class="reply-form__btn thm-btn"
                type="submit"
                @click="submitComment"
              >
                <span>发表</span>
              </button>
            </div>
          </div>
        </div>
        <div class="col-lg-4">
          <div class="sidebar">
            <div class="sidebar__single sidebar__search">
              <div class="sidebar__search-form">
                <el-input type="text" placeholder="关键词搜索..." v-model="keyword" @keydown.enter.native="getList" style="height:100%"/>
                <button type="submit"><i class="fa fa-search"></i></button>
              </div>
            </div>
            <div class="sidebar__single sidebar__post">
              <h3 class="sidebar__title">最新评论</h3>
              <div class="sidebar__post-wrap">
                <div class="sidebar__post__single" v-for="(item,index) in replyList" :key="index">
                  <div class="sidebar__post-content">
                    <h4 class="sidebar__post-title">
                      <a @click="viewQuestion(item)">{{item.title}}</a>
                    </h4>
                    <div class="latest-reply">{{item.createBy}}：{{item.contentText}}</div>
                  </div>
                </div>
                
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
</template>

<script>
import Editor from "@/components/Editor";
import { getQuestion, addQuestion,getLatestReply } from "@/api/tool/datav/question";
export default {
  name: "QuestionDetails",
  components: {
    Editor
  },
  data() {
    return {
      questionId: 2,
      questionCommentForm: {
        content: ""
      },
      commentReplyForm: {
        commentReply: ""
      },
      questionDetails: "",
      questionInfo: "",
      questionTags: [],
      commentNodes: [],
      defaultProps: {
        children: "commentNodes",
        label: "content",
        id: "id"
      },
      showItemId: undefined,
      inputComment: "",
      inputLabel: "",
      replyParentId: "",
      commentFormRules: {
        content: [
          { required: true, message: "回答内容需包含文字", trigger: "blur" }
        ]
      },
      commentReplyRules: {
        commentReply: [
          { required: true, message: "回答内容需包含文字", trigger: "blur" }
        ]
      },
      replyList:[],//最新回复列表
      keyword:"",//关键字查询
    };
  },
  mounted() {
    this.questionId = this.$route.query.id;

    //最新回复列表
    getLatestReply().then(res => {
        if (res.code == 200) {
          this.replyList = res.data
        }
      });

    this.init();
  },
  methods: {
    init() {
      getQuestion(this.questionId).then(res => {
        if (res.code == 200) {
          this.questionInfo = res.data.questionInfo;
          this.questionTags = this.questionInfo.tags.split(",");
          this.commentNodes = res.data.commentNodes;
        }
      });
    },
    //提交回复
    submitComment() {
      this.$refs["commentForm"].validate(valid => {
        if (valid) {
          let comment = {
            questionId: this.questionId,
            content: this.questionCommentForm.content,
            contentText:document.getElementsByClassName("ql-editor")[0].innerText
          };
          addQuestion(comment).then(response => {
            if (response.code === 200) {
              this.msgSuccess("新增成功");
            } else {
              this.msgError(response.msg);
            }
            this.questionCommentForm.content = "";
          });
        }
      });
      this.init();
    },
    submitCommentReply() {
      let replyInfo = {
        questionId: this.questionId,
        parentId: this.replyParentId,
        content: this.inputComment,
        contentText: this.inputComment,
      };

      addQuestion(replyInfo).then(response => {
        if (response.code === 200) {
          this.msgSuccess("新增成功");
          this.cancel();
        } else {
          this.msgError(response.msg);
        }
      });
      this.init();
    },
    cancel() {
      this.showItemId = "";
      this.inputComment = "";
    },
    showCommentInput(item, reply, type) {
      if (reply) {
        if (type == "comment") {
        }
        if (type == "reply") {
          this.inputLabel = "@" + reply.createBy + " ";
          this.replyParentId = reply.id;
        }
      }
      this.inputComment = "";
      this.showItemId = item.id;
    },
    viewQuestion(item){
      const viewRuter = this.$router.resolve({path: '/cms/question/details', query: {id: Number(item.questionId)}})
      window.open(viewRuter.href,'_self')
    },
    getList(){
      this.$router.push({name: 'qacenter', params: {keyword: this.keyword}});
    }
  }
};
</script>

<style scoped>
.blog-details {
  padding: 60px 0px;
}
.question {
  margin-bottom: 30px;
}
.question-top {
  border-bottom: 1px solid #dee2e6;
}
.question-top .blog-details__content-title {
  margin-bottom: 10px;
}
.blog-one__content {
  padding: 0px 0px;
  min-height: 100px;
  border-width: 0px;
  margin-top: 20px;
}
.jumpToComment {
  display: table-cell;
  width: 4em;
  height: 2em;
  text-align: center;
  line-height: 2em;
  margin: auto 0px;
  background: #0084ff;
  border-radius: 5px;
  color: #ffffff;
  font-size: 14px;
  cursor: pointer;
  position: absolute;
  bottom: 5px;
  right: 5px;
}
.jumpToComment:hover {
  background: #0025f5;
}
.blog-one__meta {
  margin-bottom: 5px;
}
.blog-one__meta li a {
  font-size: 18px;
}
.share-block {
  padding: 20px 10px;
}
.qu-tag {
  font-size: 14px;
  line-height: 20px;
  color: #7a838d;
  border: 1px solid rgba(100, 107, 116, 0.32);
  border-radius: 3px;
  padding: 6px 9.5px;
  display: inline-block;
  font-weight: 400;
  margin-right: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.qu-tag:hover {
  font-size: 14px;
  line-height: 20px;
  color: #7a838d;
  border: 1px solid rgba(100, 107, 116, 0.32);
  border-radius: 3px;
  padding: 6px 9.5px;
  display: inline-block;
  font-weight: 400;
  margin-right: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  color: #007afc;
  border-color: #007afc;
}
.container {
  padding: 0 10px;
  box-sizing: border-box;
}
.comment {
  display: flex;
  flex-direction: column;
  padding: 10px 0px;
  border-bottom: 1px solid #f2f6fc;
}
.comment .blog-details__content-title {
  padding-bottom: 10px;
  border-bottom: 1px solid #dee2e6;
}
.commentList {
  display: flex;
  flex-direction: column;
  padding: 10px;
  margin-bottom: 10px;
  box-shadow: 1px 1px 7px #787878;
}
::v-deep .commentContent img {
  width: 100%;
}
.info {
  display: flex;
  align-items: center;
}
.avatar {
  border-radius: 50%;
}
.commentBy {
  display: flex;
  flex-direction: column;
}
.name {
  font-size: 20px;
  color: #2d64b3;
  margin-bottom: 5px;
  font-weight: 500;
}
.date {
  font-size: 14px;
  color: #909399;
}
.content {
  font-size: 16px;
  color: #303133;
  line-height: 20px;
  padding: 10px 0;
}
.control {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #909399;
}
.comment-one__content {
  padding: 0px 0px;
}
.iconfont {
  font-size: 14px;
  margin-right: 5px;
}
.comment-reply {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-left: 10px;
}
.comment-reply:hover {
  color: rgb(0, 25, 255);
}
.reply {
  margin: 10px 0;
  /* border-left: 2px solid #dcdfe6; */
}
.item {
  margin: 0 10px;
  padding: 10px 0;
  border-bottom: 2px dashed #ebeef5;
}
.reply-content {
  /* display: flex;
  align-items: center;
  font-size: 14px;
  color: #303133; */
}
.reply-info {
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #303133;
  margin-bottom: 10px;
}
.from-name {
  color: #409eff;
  margin-right: 5px;
}
.to-name {
  color: #409eff;
  margin-left: 5px;
  margin-right: 5px;
}
.reply-bottom {
  display: flex;
  align-items: center;
  margin-top: 10px;
  font-size: 14px;
  color: #909399;
}
.reply-text {
  display: flex;
  align-items: center;
  margin-left: 10px;
  cursor: pointer;
}
.reply-text:hover {
  color: rgb(0, 25, 255);
}
.icon-iconcomment {
  margin-right: 5px;
  margin-top: 4px;
  font-size: 13px;
}
.write-reply {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #909399;
  padding: 10px;
  cursor: pointer;
}
.write-reply:hover {
  color: #303133;
}
.write-reply .el-icon-edit {
  margin-right: 5px;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
.input-wrapper {
  padding: 10px;
}
.btn-control {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10px;
}
.cancel {
  font-size: 16px;
  color: #606266;
  margin-right: 20px;
  cursor: pointer;
}
.cancel:hover {
  color: #333;
}
.confirm {
  font-size: 16px;
}
::v-deep .blog-one__content img {
  max-width: 100%;
}
.sidebar__single:not(.sidebar__search) {
    padding: 30px;
    border-style: solid;
    border-width: 1px;
    border-color: #efefef;
    border-radius: 5px;
}
.sidebar__post-content {
     padding-left: 0;
}
.latest-reply{
  width: 300px;
  height: auto;
  display:-webkit-box;
  overflow: hidden; /*超出隐藏*/
  text-overflow: ellipsis;/*隐藏后添加省略号*/
  -webkit-box-orient:vertical; 
  -webkit-line-clamp:2; /*想显示多少行*/
  margin-top: 7px;
}
.sidebar__post-title {
    margin: 0;
    font-size: 16px;
    line-height: 24px;
    font-weight: 400;
    color: #74727a;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 300px;
}
::v-deep.sidebar__search-form .el-input__inner{
  height: 100%;
}
.comment-one__image, .comment-one__content {
    display: block;
    vertical-align: top;
}
.comment-one__top-left, .comment-one__top-right {
    display: block;
    vertical-align: top;
}
</style>